<template>
  <inline-modal
    :title="'【' + (json?json.lists.actDeModelName:'') + '】- 审批流程'"
    :visible="visible"
    @cancel="() => {
      $emit('cancel');
    }"
  >
    <template slot="button">
      <a-button
        class="delete-btn margin-left-sm"
        @click="
          () => {
            $emit('cancel');
          }
        "
        >{{$ct('close','关闭')}}</a-button
      >
    </template>
    <a-tabs
      v-model="mode"
      @change="changeMode"
      class="formTab"
    >
    <a-tab-pane key="1">
        <span slot="tab">
          <a-icon type="form" />
          {{$ct('formFields','表单信息')}}
        </span>
        <a-form :form="form">
          <a-card>
            <previewModal
              v-if="this.modelType === '2'"
              ref="previewModal"
              :drawingList="drawingList"
              :isView="true"
            />
            <template v-else>
              <component
                id="printForm"
                ref="previewModal"
                :isView="true"
                v-for="(plugItem, plugIndex) in plugs"
                :drawingList="plugItem.formData"
                :is="plugItem.formUrl"
                :key="plugIndex"
              ></component>
            </template>
          </a-card>
        </a-form>
      </a-tab-pane>
      <a-tab-pane key="2">
        <span slot="tab">
          <a-icon type="picture" />
          {{$ct('workflowChart','流程图')}}
        </span>
        <bpmn-viewer
					ref="bpmView"
					:params="params"
					:inProgress="inProgress"
					:notInProgress="notInProgress"
					:nodeParam="nodeParam"
				></bpmn-viewer>
      </a-tab-pane>
      <a-tab-pane key="3">
        <span slot="tab">
          <a-icon type="history" />
          {{$ct('approvalRecord','审批记录')}}
        </span>
        <comment-bean-list-vue ref="commentBeanListRef"
          :dataList="dataList" :commentParams="commentParams"></comment-bean-list-vue>
      </a-tab-pane>
    </a-tabs>

  </inline-modal>
</template>

<script>
import previewModal from "@/components/TopVUI/k-form-design/packages/KFormPreview/preview.vue";
import BpmnViewer from "@/components/TopVUI/bpmn/Viewer";
import { PageView, RouteView } from "@/layouts";
import draggable from "vuedraggable";
import pick from "lodash.pick";
import { getTypeListByFiled } from "@/utils/formatter";
import commentBeanListVue from '@/pages/workflow/apiFlowableTask/myMission/components/commentBeanList.vue';
// 表单字段
const fields = [
  "processInstanceId",
  "taskId",
  "message",
  "processDefinitionId",
];
const columns = [
  {
    title: "审核环节",
    dataIndex: "activityName",
    align: "center",
    langCode: "auditPhase",

  },
  {
    title: "审核人",
    dataIndex: "userName",
    align: "center",
    langCode: "ReviewedBy",

  },
  {
    title: "审核类型",
    dataIndex: "comment.type",
    align: "center",
		scopedSlots: {
		  customRender: "type"
		},
    langCode: "AuditType",

  },
  {
    title: "审批意见",
    dataIndex: "comment.message",
    align: "center",
    langCode: "ReviewComments",

  },
  {
    title: "审核时间",
    dataIndex: "comment.time",
    sorter: false,
    align: "center",
    langCode: "AuditTime",

  },
];
export default {
  name: "TreeList",
  components: {
    BpmnViewer,
    previewModal,
    commentBeanListVue,
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    model: {
      type: Object,
    },
  },
  data() {
    return {
      columns,
      currentItem: "",
      index: "",
      drawingList: {},
      activeId: "",
      type: "",
      tableName: "",
      loading: false,
      fullscreen: true,
      isTask: true,
      mode: "1",
      params: "",
      dataList: [],
      inProgress: [],
      notInProgress: [],
      flowNodeButtons: [],
      nodeParam: {},
      modelType: 0,
      plugs: [],
			form: this.$form.createForm(this),
      json: "",
      pagination: {
        pageSize: 5,
        hideOnSinglePage: true,
      },
      commentParams: {},
    };
  },
  mounted() {
    this.params = ``;
    this.plugs = [];
    this.plugs.push(() =>
      import(
        `@/components/TopVUI/k-form-design/packages/KFormPreview/preview.vue`
      )
    );
  },
  methods: {
    changeMode(e) {
      this.mode = e;
      if (this.$refs.bpmView)
        this.$refs.bpmView.initDiagramAgain(
          this.json.lists.actDeModelId,
          this.json.lists.actDeModelKey,
          this.json.lists.actDeModelName,
          this.params
        );
    },
    // 获取数据
    loadData(record, json) {
      this.json = json;
      this.mode = "1";
      this.modelType = json.lists.modelType;
      if (this.modelType === "2") {
        this.plugs = [];
        this.plugs.push(() =>
          import(
            `@/components/TopVUI/k-form-design/packages/KFormPreview/preview.vue`
          )
        );
        this.drawingList = JSON.parse(json.lists.formDesign);
        // 数据接收赋值
        if (json.formDetail) {
          if (Array.isArray(json.formDetail)) {
            this.drawingList.list.forEach(item => {
              json.formDetail.forEach(obj => {
                if (item.model === obj.tableField) {
                  item.options.defaultValue = obj.fieldValue;
                }
              })
            })
          } else {
            this.drawingList.list.forEach(item => {
              if (json.formDetail.hasOwnProperty(item.model)) { // 检查json.formDetail中是否存在item.model作为键
                item.options.defaultValue = json.formDetail[item.model]; // 如果存在，则赋值
              }
            })
          }
        }
        this.drawingList.list.forEach((e, index) => {
          // e.options.hidden = false
          getTypeListByFiled(e, json.flowNodeField);
          e.options.disabled = true
        });
        if (this.$refs.previewModal)
          this.$refs.previewModal.jsonData = this.drawingList;
      } else {
        let plugs = [];
        this.plugs = [];
        this.drawingList = json.businessData;
        // json.flowNodeButtons.forEach((e) => {
        //   plugs.push({
        //     formUrl: () => import(`@/pages${e.nodeFormPath}`),
        //     formData: e?.map?.businessData,
        //   });
        // });
        // this.plugs = plugs;
        // plugs.push(() => import(`@/pages${json.flowNodeButtons[0].nodeFormPath}`))
        plugs.push({
					formUrl: (resolve) => require([`@/pages${json.flowNodeButtons[0].nodeFormPath}.vue`], resolve),
					formData: json.businessData,
				});

				this.plugs = plugs;
      }
      this.nodeParam = {
        procdefId: record.processDefinitionId,
        processInstanceId: record.processInstanceId,
      };

      this.params = json.lists.flowDesign;
      if (this.$refs.bpmView)
        this.$refs.bpmView.initDiagramAgain(
          json.lists.actDeModelId,
          json.lists.actDeModelKey,
          json.lists.actDeModelName,
          this.params
        );
      this.commentParams = {
        procdefId: record.processDefinitionId,
        businessKey: record.businessKey,
        modelKey: record.modelKey,
        processInstanceId: record.processInstanceId
      }
      this.dataList = json.commentBeanList;
      this.inProgress = json.inProgress;
      this.notInProgress = json.notInProgress;
    },
    activeFormItem(currentItem, index) {
      this.drawingList[index] = currentItem;
    },
  },
};
</script>

<style scoped="scoped" lang="less">
.ant-form {
  height: auto;
}

.mL .ant-modal-footer {
  border: none !important;
}

/deep/ .ant-card {
  /* box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 20px 0px !important; */
}
/deep/ .my-bpmn-con .bpmn-viewer-content {
  height: calc(100vh - 160px) !important;
}

/deep/.ant-table-tbody>tr>td, /deep/.ant-table-thead>tr>th{
	padding: 0 8px !important;
}
/deep/.formTab.ant-tabs.ant-tabs-top.ant-tabs-line{
  height: calc(100vh - 210px) !important;
}
/deep/.ant-tabs-tabpane.ant-tabs-tabpane-active{
  overflow: auto;
  height: calc(100vh - 266px) !important;
}
.page-common-layout .page-common-content .ant-tabs-content .ant-card{
  height: auto !important;
}
</style>
